<template>
  <div style='position:relative'>
    <div v-if='isReadOnlyPage === true'>
      <p id="text_area" v-html='value'></p>
    </div>
    <div v-else>
      <a-input v-model='values' style="position:absolute;top:0;left:0;width:500px;opacity:0" :disabled="isDisabled"/>
      <editor v-model='values' @edit='createPositionEdit' height="200px" :simpleToolBar="true" :disabled="isDisabled" @onEditorBlur="onEditorBlur"></editor>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/Editor/Editor'
export default {
  name: 'RichTextarea',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'isReadOnlyPage', 'isDisabled', 'keySign'],
  components: { Editor },
  data () {
    return {
      options: [],
      values: '',
      message: '请输入内容'
    }
  },
  watch: {
    value: function (ele) {
      // console.log(ele)
      this.values = ele
    }
  },
  methods: {
    // 职位描述
    createPositionEdit (val, text) {
      this.$emit('changePositionEdit', val, text, this.keySign)
      this.$emit('change', val, this.keySign)
    },
    onEditorBlur () {
      // this.$emit('onBlurFn', true)
    }
  }
}
</script>

<style>
.positionEdit .ql-container {
  transition: 0.2s;
  min-height: 120px;
}
#text_area ol li {
  list-style: decimal;
}
#text_area ul li {
  list-style: initial;
}
</style>
